import {PageContainer} from '@ant-design/pro-components';
import {useModel} from '@umijs/max';
import {Card, Divider, Form, Input, theme} from 'antd';
import React, { useEffect, useState } from 'react';
import { ProDescriptions } from '@ant-design/pro-components';
import dayjs from 'dayjs';
import {ProList} from '@ant-design/pro-components';
import {Button, Space, Tag} from 'antd';
import request from 'umi-request';
import { message } from 'antd';
import {
  getInterfaceInfoByIdUsingGET, invokingInterfaceInfoUsingPOST,
  listInterfaceInfoByPageUsingGET
} from "@/services/tuzi-server/interfaceInfoController";
import {useParams} from "react-router-dom";

const Index: React.FC = () => {
  const [data, setData] = useState<API.InterfaceInfo>();
  const [invokeRes, setInvokeRes] = useState<any>();
  const [invokeLoading, setInvokeLoading] = useState(false);
  const params  = useParams();
  const id = params.id;
  if (!id) {
    message.error('请求失败，参数不存在');
    return null;
  }

  const loadData = async () => {
    try {
      const res = await getInterfaceInfoByIdUsingGET({
        id: Number(id)
      });
      console.log("res = " + res)
      setData(res?.data);
    } catch (error: any) {
      message.error('请求失败，' + error.message);
    }
  };

  useEffect(() => {
    loadData();
  }, []);


  const onFinish = async (values: any) => {
    if (!params.id) {
      message.error('接口不存在');
      return;
    }
    setInvokeLoading(true);
    try {
      const res = await invokingInterfaceInfoUsingPOST({
        id: params.id,
        ...values,
      });
      setInvokeRes(res.data);
      message.success('请求成功!');
    } catch (error: any) {
      message.error('操作失败，' + error.message);
    }
    setInvokeLoading(false);
  };

  return (
    <Card>
      <ProDescriptions
        dataSource={data}
        column={2}
        title={data?.name + " 接口详情"}
      >
        <ProDescriptions.Item
          span={2}
          dataIndex="description"
          valueType="text"
          contentStyle={{
            maxWidth: '80%',
          }}
          ellipsis
          label="描述"
        />

        <ProDescriptions.Item
          valueType="text"
          label="请求类型"
          dataIndex="method"
        />

        <ProDescriptions.Item
          valueType="text"
          label="请求头"
          dataIndex="requestHeader"
        />

        <ProDescriptions.Item
          valueType="text"
          label="响应头"
          dataIndex="responseHeader"
        />

        <ProDescriptions.Item
          valueType="text"
          label="请求参数"
          dataIndex="requestParams"
        />

        <ProDescriptions.Item
          span={2}
          valueType="text"
          contentStyle={{
            maxWidth: '80%',
          }}
          ellipsis
          label="接口地址"
          dataIndex="url"
        />

        <ProDescriptions.Item
          span={2}
          valueType="text"
          contentStyle={{
            maxWidth: '80%',
          }}
          ellipsis
          label="创建人"
          dataIndex="userId"
        />
        <ProDescriptions.Item
          dataIndex="createTime"
          label="创建日期"
          valueType="date" />

        <ProDescriptions.Item
          dataIndex="updateTime"
          label="更新日期"
          valueType="date" />

        <ProDescriptions.Item
          label="接口状态"
          request={async () => [
            { label: '开启', value: '1' },
            { label: '关闭', value: '0' }
          ]}
          dataIndex="status"
        />

      </ProDescriptions>
      <Divider />
      <Card title={"测试接口"}>
        <Form name="invoke" layout="vertical" onFinish={onFinish}>
          <Form.Item label="请求参数" name="userRequestParams">
            <Input.TextArea />
          </Form.Item>
          <Form.Item wrapperCol={{ span: 16 }}>
            <Button type="primary" htmlType="submit">
              调用
            </Button>
          </Form.Item>
        </Form>
      </Card>
      <Divider />
      <Card title="返回结果" loading={invokeLoading}>
        {invokeRes}
      </Card>
    </Card>
  );
};

export default Index;
